<div class="border-bottom">
  <h2 class="pt-3 pb-2"><%= t ".title" %></h2>
</div>

<div class="card my-3">
  <div class="list-group list-group-flush text-nowrap" role="table">
    <header class="list-group-item bg-body-tertiary">
      <div class="row small text-muted text-uppercase align-items-center">
        <div class="col-lg-2"></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t "good_job.models.cron.class" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t "good_job.models.cron.schedule" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t "good_job.models.cron.next_scheduled" %></div>
        <div class="col-lg-1 d-none d-lg-block"><%= t "good_job.models.cron.last_run" %></div>
        <div class="col-lg-1 d-none d-lg-block"><%= t "good_job.models.cron.status" %></div>
        <div class="col-lg-2 text-end">
          <%= tag.button type: "button", class: "btn btn-sm text-muted", role: "button",
                         data: { bs_toggle: "collapse", bs_target: ".cron-entry-properties" },
                         aria: { expanded: false, controls: @cron_entries.map { |cron_entry| "##{dom_id(cron_entry, 'properties')}" }.join(" ") } do %>
            <%= render_icon "info" %>
            <span class="visually-hidden"><%= t "good_job.actions.inspect" %></span>
          <% end %>
        </div>
      </div>
    </header>
    <% @cron_entries.each do |cron_entry| %>
      <div id="<%= dom_id(cron_entry) %>" class="list-group-item py-3" role="row">
        <div class="row align-items-center">
          <div class="col-12 col-lg-2">
            <div class="small font-monospace text-wrap"><%= cron_entry.key %></div>
            <div class="small text-muted text-wrap"><%= cron_entry.description %></div>
          </div>
          <div class="col-12 col-lg-2 text-wrap"><%= tag.span tag.code(cron_entry.job_class), class: "fs-5 mb-0" %></div>
          <div class="col-6 col-lg-2 text-wrap">
            <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.cron.schedule" %></div>
            <span class="font-monospace fw-bold"><%= cron_entry.display_schedule %></span>
          </div>
          <div class="col-6 col-lg-2 text-wrap small">
            <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.cron.next_scheduled" %></div>
            <%= relative_time cron_entry.next_at %>
          </div>
          <div class="col-6 col-lg-1 text-wrap small">
            <% if cron_entry.last_job.present? %>
              <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.cron.last_run" %></div>
              <%= link_to relative_time(cron_entry.last_job_at), cron_entry_path(cron_entry), title: "Job #{cron_entry.last_job.id}" %>
            <% end %>
          </div>
          <div class="col-6 col-lg-1 text-wrap small">
            <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.cron.status" %></div>
            <% if cron_entry.enabled? %>
              <span class="text-success"><%= t "good_job.models.cron.states.active" %></span>
            <% else %>
              <span class="text-muted"><%= t "good_job.models.cron.states.paused" %></span>
            <% end %>
          </div>
          <div class="col-lg-2 d-flex gap-3 justify-content-end">
            <%= button_to enqueue_cron_entry_path(cron_entry), method: :post, class: "btn btn-sm btn-outline-primary", form_class: "d-inline-block", aria: { label: t("good_job.cron_entries.actions.enqueue") }, title: t("good_job.cron_entries.actions.enqueue"), data: { confirm: t("good_job.cron_entries.actions.confirm_enqueue") } do %>
              <%= render_icon "skip_forward" %>
            <% end %>

            <% if cron_entry.enabled? %>
              <%= button_to disable_cron_entry_path(cron_entry), method: :put, class: "btn btn-sm btn-outline-primary", form_class: "d-inline-block", aria: { label: t("good_job.cron_entries.actions.disable") }, title: t("good_job.cron_entries.actions.disable"), data: { confirm: t("good_job.cron_entries.actions.confirm_disable") } do %>
                <%= render_icon "pause" %>
              <% end %>
            <% else %>
              <%= button_to enable_cron_entry_path(cron_entry), method: :put, class: "btn btn-sm btn-outline-primary", form_class: "d-inline-block", aria: { label: t("good_job.cron_entries.actions.enable") }, title: t("good_job.cron_entries.actions.enable"), data: { confirm: t("good_job.cron_entries.actions.confirm_enable") } do %>
                <%= render_icon "play" %>
              <% end %>
            <% end %>

            <%= tag.button type: "button", class: "btn btn-sm text-muted", role: "button",
                           title: t("good_job.actions.inspect"),
                           data: { bs_toggle: "collapse", bs_target: "##{dom_id(cron_entry, 'properties')}" },
                           aria: { expanded: false, controls: dom_id(cron_entry, "properties") } do %>
              <%= render_icon "info" %>
              <span class="visually-hidden"><%= t "good_job.actions.inspect" %></span>
            <% end %>
          </div>
        </div>
      </div>
      <%= tag.div id: dom_id(cron_entry, 'properties'), class: "collapse cron-entry-properties list-group-item collapse small bg-dark text-secondary" do %>
        <%= tag.pre JSON.pretty_generate(cron_entry.display_properties) %>
      <% end %>
    <% end %>
    <% if @cron_entries.empty? %>
      <div class="list-group-item py-4 text-center text-muted">
        <%= t ".no_cron_schedules_found" %>
      </div>
    <% end %>
  </div>
</div>
